// Light theme for CodeMirror

// Editor styling
// Three editor instances can be styled: The main editor, the quicklook editor
// and the custom CSS editor
#editor .CodeMirror, .quicklook .body .CodeMirror, .dialog .CodeMirror {
    color:rgb(46, 56, 60);

    &.cm-stex-mode, &.cm-css-mode {
      font-family: @font-code;
        .cm-comment    { color: var(--grey-2); }
        .cm-attribute  { color: var(--blue-0); }
        .cm-builtin    { color: var(--blue-0); } // Some modes use this for keywords
        .cm-string     { color: var(--green-0); }
        .cm-string-2   { color: var(--gold-selection-dark); }
        .cm-variable   { color: var(--grey-6); }
        .cm-variable-2 { color: var(--green-selection-dark); }
        .cm-keyword    { color: var(--purple-selection); }
        .cm-property   { color: var(--orange-2); }
        .cm-type       { color: var(--orange-2); }
        .cm-atom       { color: var(--green-0); }
        .cm-number     { color: var(--blue-0); }
    }
}

.CodeMirror-focused .CodeMirror-selected { background-color: var(--selection-light); }
.CodeMirror .CodeMirror-selected { background-color: var(--selection-light); }
.CodeMirror-cursor { background: var(--c-primary); }

// Now general styling for variables

// First generic variables
.cm-comment, .cm-fenced-code, .cm-inline-math { color: var(--grey-3); }

.cm-comment:not(.cm-formatting):not(.cm-fenced-code)  {
  background-color: var(--grey-0);
  &:first-child {
    border-top-left-radius: @border-radius;
    border-bottom-left-radius: @border-radius;
    padding-left: 5px;
  }
  &:last-child {
    border-top-right-radius: @border-radius;
    border-bottom-right-radius: @border-radius;
    padding-right: 5px;
  }
}

// We need to make sure inline elements (directly after & before formatting
// elements) also have this nice padding and border.
.cm-formatting + .cm-comment:not(.cm-formatting):not(.cm-fenced-code) {
  border-top-left-radius: @border-radius;
  border-bottom-left-radius: @border-radius;
  padding-left: 5px;
}
.cm-formatting  ~ .cm-comment:not(.cm-formatting):not(.cm-fenced-code){
  border-top-right-radius: @border-radius;
  border-bottom-right-radius: @border-radius;
  padding-right: 5px;
}

.cm-highlight { background-color: yellow; color: #333; }

.cm-fenced-code, .cm-stex-mode {
  font-family: @font-code;
    &.cm-comment    { color: var(--grey-2); }
    &.cm-attribute  { color: var(--blue-0); }
    &.cm-builtin    { color: var(--blue-0); } // Some modes use this for keywords
    &.cm-string     { color: var(--green-0); }
    &.cm-string-2   { color: var(--gold-selection-dark); }
    &.cm-variable   { color: var(--grey-6); }
    &.cm-variable-2 { color: var(--green-selection-dark); }
    &.cm-keyword    { color: var(--purple-selection-dark); }
    &.cm-property   { color: var(--orange-2); }
    &.cm-type       { color: var(--orange-2); }
    &.cm-atom       { color: var(--green-0); }
    &.cm-number     { color: var(--blue-0); }
    &.cm-positive   { color: var(--green-0); }
    &.cm-negative   { color: var(--red-0); }
}

// HTML tags
.cm-tag       { font-family: @font-code; color: var(--orange-2); }
.cm-attribute { font-family: @font-code; color: var(--blue-0); }
.cm-string    { font-family: @font-code; color: var(--green-0); }
.cm-bracket   { font-family: @font-code; color: var(--grey-5); }

// TYPOGRAPHY
.cm-formatting-header-1, .cm-formatting-header-2, .cm-formatting-header-3,
.cm-formatting-header-4, .cm-formatting-header-5, .cm-formatting-header-6,
.cm-url { color: var(--c-primary); }

.size-header-1, .size-header-2, .size-header-3,
.size-header-4, .size-header-5, .size-header-6 { font-weight: bold; }

// Style the code block line wrapper classes
.code-block-line { background-color: #eee; }

/* LISTS */
.cm-formatting-list-ul,
.cm-formatting-list-ol { color: var(--c-primary); }

/* TYPOGRAPHY */
.cm-quote, .cm-link, .cm-strong, .cm-em { color:var(--c-primary); }
.cm-spell-error {
  text-decoration: underline;
  text-decoration-color: var(--orange-2);
  text-decoration-style: dotted;
  // Prevent skipping of low-baseline chars to prevent strange artefacts
  text-decoration-skip-ink: none;
}
.cm-zkn-tag, .cm-zkn-id, .cm-zkn-link, .cm-zkn-link-formatting { color:var(--c-primary); }
// cma = code-mirror-anchor
.cma { color: var(--c-primary); font-weight: inherit; }

// citations
.citeproc-citation {
  background-color: var(--grey-0);
  &.error { color: var(--red-2); }
}

// Mermaid charts
.mermaid-chart {
  // THEMING
  // For now, a simple background
  // for easy recognition
  svg {
    background-color: var(--grey-4);
    border-radius: 5px;
  }
  // .edgePaths {
  //   stroke: #333;
  // }

  // .nodes {
  //   rect {
  //     fill: #fff;
  //     stroke: #333;
  //   }
  //   color: #333;
  // }

  cursor: default; // No text cursor
  &.error {
    font-family: @font-code; // For the error messages
    color: var(--fg-error);
  }
}

.cm-escape-char { color:var(--grey-3); }

// Horizontal ruler
.cm-hr {
  color: var(--c-primary);
  font-family: @font-code;
  font-weight: bold;
}

// Add a cool indicator to the front matter -- overwrites the .cm-hr style above
.cm-yaml-frontmatter-start {
  color: inherit;

  &::after {
    content: "YAML Frontmatter";
    display: inline-block;
    margin-left: 10px;
    padding: 0px 5px;
    font-size: 60%;
    font-weight: normal;
    vertical-align: middle;
    color: rgb(180, 180, 180);
    background-color: rgb(240, 240, 240);
  }
}

.CodeMirror-foldmarker {
  background-color: var(--grey-0);
  color: var(--grey-3);

  &:hover { background-color: var(--grey-1); }
}

.CodeMirror-guttermarker-subtle { color: #dadada; }

// Heading tags
.heading-tag {
  color: var(--grey-1);
  transition: 0.2s all ease;
  &:hover {
    color: var(--grey-3);
    background-color: var(--grey-1);
  }
}

// The active line when in typewriter mode
.CodeMirror-linebackground.typewriter-active-line {
  border-top: 2px solid @grey-3;
  border-bottom: 2px solid @grey-3;
  background-color: @grey-1;
  margin-top: -2px;
  margin-bottom: -2px;
}

// Hint related stuff
.CodeMirror-hints {
  -webkit-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
  -moz-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
  box-shadow: 2px 3px 5px rgba(0,0,0,.2);
  border-radius: @border-radius;
  border: 1px solid var(--grey-1);

  background: white;
  font-size: 90%;
  li.CodeMirror-hint {
    color: var(--grey-7);

    &:hover { background-color: var(--grey-0); }
  }

  li.CodeMirror-hint-active {
    background: var(--c-primary);
    color: var(--grey-0);

    &:hover { background-color: var(--c-primary-shade); }
  }

  // Special tags
  .cm-hint-colour {
    color: var(--grey-3);
    background-color: var(--grey-2);
  }
}
